Next.js App Directory: En filbaseret routing-revolution

Next.js har konsekvent flyttet grænserne for webudvikling og tilbyder udviklere kraftfulde værktøjer og funktioner til at bygge performante, skalerbare og brugervenlige applikationer. Introduktionen af App Directory repræsenterer et betydeligt spring fremad, især i dets innovative tilgang til filbaseret routing. Denne artikel dykker dybt ned i App Directory's routingmekanisme og udforsker dens fordele, nøglekoncepter og praktiske implikationer for opbygning af moderne webapplikationer med Next.js.

Forståelse af udviklingen af routing i Next.js

Før App Directory var Next.js afhængig af Pages Directory til routing. Selvom denne tilgang var effektiv, havde den visse begrænsninger. Pages Directory brugte et simpelt filbaseret routingsystem, hvor hver fil i `pages`-mappen svarede til en rute. For eksempel ville `pages/about.js` blive kortlagt til `/about`-ruten.

Selvom Pages Directory var ligetil, manglede den indbygget understøttelse af komplekse layouts, datahentningsstrategier og server-side rendering-mønstre, hvilket ofte krævede, at udviklere implementerede disse funktioner manuelt. Desuden kunne den tætte kobling af datahentning og komponentrendering nogle gange føre til flaskehalse i ydeevnen.

App Directory adresserer disse begrænsninger ved at introducere et mere fleksibelt og kraftfuldt routingsystem bygget på React Server Components, Layouts og andre avancerede funktioner. Det bevæger sig ud over en simpel fil-til-rute-kortlægning og tilbyder en mere deklarativ og komponerbar tilgang til at definere applikationsruter og layouts.

Introduktion til App Directory: Et nyt paradigme for routing

App Directory, der er placeret i roden af dit Next.js-projekt i `app`-mappen, introducerer en fundamentalt anderledes tilgang til routing. I stedet for direkte at kortlægge filer til ruter bruger App Directory et konventionsbaseret system, hvor strukturen af mapper og specielle filer bestemmer applikationens ruter.

Denne tilgang giver flere vigtige fordele:

• Forbedret organisation: Den hierarkiske struktur i App Directory fremmer bedre organisation og kodevedligeholdelse. Du kan gruppere relaterede komponenter og ruter logisk inden for undermapper.
• Forbedret ydeevne: Ved at udnytte React Server Components og avancerede datahentningsfunktioner giver App Directory udviklere mulighed for at optimere ydeevnen og reducere klient-side JavaScript.
• Deklarativ routing: App Directory's filbaserede tilgang giver udviklere mulighed for at definere ruter og layouts deklarativt, hvilket gør applikationens struktur mere gennemsigtig og lettere at forstå.
• Indbyggede layouts og skabeloner: App Directory giver indbygget understøttelse af at definere layouts og skabeloner, der deles på tværs af flere sider, hvilket reducerer kodegendannelse og forbedrer konsistensen.

Nøglekoncepter i App Directory's routingsystem

For effektivt at udnytte App Directory's routingsystem er det vigtigt at forstå de nøglekoncepter, der understøtter dets funktionalitet:

1. Rutesegmenter og mapper

Hver mappe i `app`-mappen repræsenterer et rutesegment. Navnet på mappen svarer til stisegmentet i URL'en. For eksempel vil en `app/blog/posts`-mappestruktur blive kortlagt til `/blog/posts`-ruten.

Overvej denne struktur:

            app/
  blog/
    posts/
      page.js

            

              
                Copy
              
            
          

Denne struktur definerer en rute på `/blog/posts`. Filen `page.js` i mappen `posts` er rutesegmentkomponenten, der gengiver indholdet til den rute.

2. Filen `page.js`: Gengivelse af ruteindhold

Filen page.js (eller page.tsx for TypeScript) er en speciel fil, der definerer det indhold, der skal gengives for et specifikt rutesegment. Det er indgangspunktet for den rute. Denne fil skal eksportere en React-komponent som sin standardeksport.

Eksempel:

            // app/blog/posts/page.js

export default function PostsPage() {
  return (
    <div>
      <h1>Blogindlæg</h1>
      <p>Liste over blogindlæg vil blive vist her.</p>
    </div>
  );
}

            

              
                Copy
              
            
          

3. Layouts: Definering af delt UI

Layouts giver dig mulighed for at definere UI, der deles på tværs af flere sider eller rutesegmenter. Et layout kan indeholde elementer som headers, footers, sidebars eller andre komponenter, der skal være konsistente i en sektion af din applikation. Layouts defineres ved hjælp af filen `layout.js` (eller `layout.tsx`).

Layouts er indlejrede. Det betyder, at rodlayoutet (`app/layout.js`) omslutter hele applikationen, og indlejrede layouts omslutter specifikke rutesegmenter. Når du navigerer mellem ruter, der deler et layout, bevarer Next.js layoutets tilstand og undgår at gengive det igen, hvilket resulterer i forbedret ydeevne og en mere jævn brugeroplevelse.

Eksempel:

            // app/layout.js

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>
          <nav>
            <a href="/">Hjem</a> |
            <a href="/blog">Blog</a>
          </nav>
        </header>
        <main>{children}</main>
        <footer>
          <p>Copyright 2023</p>
        </footer>
      </body>
    </html>
  );
}

            

              
                Copy
              
            
          

I dette eksempel definerer `RootLayout` den grundlæggende HTML-struktur, header, footer og navigation for hele applikationen. Enhver side, der gengives i `app`-mappen, vil blive omsluttet af dette layout.

4. Skabeloner: Bevaring af tilstand mellem ruter

Ligesom layouts omslutter skabeloner også underordnede ruter. I modsætning til layouts opretter skabeloner dog en ny komponentinstans for hver underordnet rute. Det betyder, at skabelonens tilstand ikke bevares, når du navigerer mellem ruter i skabelonen. Skabeloner er nyttige i scenarier, hvor du skal nulstille eller geninitialisere tilstanden ved rutetransitioner. Brug template.js (eller template.tsx) til at oprette skabeloner.

5. Rutegrupper: Organisere ruter uden URL-segmenter

Rutegrupper giver dig mulighed for at organisere dine ruter i App Directory uden at påvirke URL-strukturen. Rutegrupper defineres ved at omslutte mappenavne i parenteser, f.eks. `(group-name)`. Disse parenteser fortæller Next.js at behandle mappen som en logisk grupperingsmekanisme snarere end et rutesegment.

Dette er især nyttigt til at organisere store applikationer med mange ruter. For eksempel kan du bruge rutegrupper til at adskille forskellige sektioner af din applikation, såsom `(marketing)` og `(app)`. Disse grupper påvirker kun filstrukturen, ikke URL-stierne.

Eksempel:

            app/
  (marketing)/
    home/
      page.js  // Tilgængelig på /home
    about/
      page.js  // Tilgængelig på /about
  (app)/
    dashboard/
      page.js  // Tilgængelig på /dashboard

            

              
                Copy
              
            
          

6. Dynamiske ruter: Håndtering af variable segmenter

Dynamiske ruter giver dig mulighed for at oprette ruter med variable segmenter. Dette er nyttigt i scenarier, hvor du skal generere ruter baseret på data, såsom blogindlæg, produktsider eller brugerprofiler. Dynamiske rutesegmenter defineres ved at omslutte segmentnavnet i firkantede parenteser, f.eks. `[id]`. `id` repræsenterer en parameter, der kan tilgås i komponenten `page.js`.

Eksempel:

            app/
  blog/
    [slug]/
      page.js

            

              
                Copy
              
            
          

I dette eksempel er `[slug]` et dynamisk rutesegment. En URL som `/blog/mit-første-indlæg` ville matche denne rute, og parameteren `slug` ville blive sat til `mit-første-indlæg`. Du kan få adgang til parameteren `slug` i komponenten `page.js` ved hjælp af egenskaben `params`.

            // app/blog/[slug]/page.js

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>Blogindlæg: {slug}</h1>
      <p>Indholdet af blogindlægget med slug: {slug}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

Du skal generere de mulige værdier for disse dynamiske ruter. Next.js leverer funktionen `generateStaticParams` til statisk sitegenerering (SSG) og server-side rendering (SSR). Denne funktion giver dig mulighed for at specificere, hvilke dynamiske ruter der skal forhåndsgengives ved build-tid.

            // app/blog/[slug]/page.js

export async function generateStaticParams() {
  const posts = [
    { slug: 'mit-første-indlæg' },
    { slug: 'mit-andet-indlæg' },
  ];

  return posts.map((post) => ({ slug: post.slug }));
}

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>Blogindlæg: {slug}</h1>
      <p>Indholdet af blogindlægget med slug: {slug}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

7. Catch-All-segmenter: Håndtering af ukendte ruter

Catch-all-segmenter er en type dynamisk rute, der giver dig mulighed for at matche et vilkårligt antal segmenter i en URL. De defineres ved at præfikse segmentnavnet med tre prikker, f.eks. `[...path]`. Catch-all-segmenter er nyttige til at oprette fleksible ruter, der kan håndtere en række forskellige URL-strukturer.

Eksempel:

            app/
  docs/
    [...path]/
      page.js

            

              
                Copy
              
            
          

I dette eksempel er `[...path]` et catch-all-segment. URL'er som `/docs/introduction`, `/docs/api/reference` og `/docs/examples/basic` ville alle matche denne rute. Parameteren `path` ville være en array, der indeholder de matchede segmenter.

            // app/docs/[...path]/page.js

export default function DocsPage({ params }) {
  const { path } = params;
  return (
    <div>
      <h1>Dokumentation</h1>
      <p>Sti: {path.join('/')}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

8. Parallelle ruter: Gengivelse af flere sider samtidigt

Parallelle ruter giver dig mulighed for at gengive flere sider i det samme layout samtidigt. Dette er især nyttigt til at oprette komplekse UI-mønstre, såsom dashboards med flere paneler eller modale dialogbokse, der vises oven på den aktuelle side. Parallelle ruter defineres ved hjælp af symbolet @, f.eks. `@children`, `@modal`. De kan specificeres direkte i URL'en eller navigeres til ved hjælp af hooket `useRouter`.

Eksempel:

            app/
  @children/
    page.js // Gengiver hovedindholdet
  @modal/
    login/
      page.js // Gengiver loginmodalen

            

              
                Copy
              
            
          

For at vise parallelle ruter skal du bruge komponenten <Slot>.

9. Opsnapning af ruter: Oprettelse af sofistikerede UI-overgange

Opsnapning af ruter giver dig mulighed for at indlæse en rute fra en anden del af din applikation inden for konteksten af den aktuelle rute. Dette kan bruges til at oprette sofistikerede UI-overgange, såsom at vise en modal dialogboks, når du klikker på et link uden at navigere væk fra den aktuelle side. De defineres ved hjælp af syntaksen (...).

Datahentning i App Directory

App Directory introducerer nye og forbedrede måder at hente data på, idet der udnyttes React Server Components og `fetch`-API'en med indbygget caching og revalideringsfunktioner. Dette fører til bedre ydeevne og en mere strømlinet udviklingsoplevelse. Både server- og klientkomponenter kan hente data, men strategien er forskellig.

1. Datahentning i serverkomponenter

Serverkomponenter, som er standard i App Directory, kan direkte hente data fra databaser eller API'er. Dette gøres i komponentfunktionen før gengivelse. Da serverkomponenter kører på serveren, kan du sikkert inkludere hemmelige nøgler og legitimationsoplysninger uden at udsætte dem for klienten. `fetch`-API'en er automatisk memoiseret, hvilket betyder, at identiske dataanmodninger deduplikeres, hvilket yderligere forbedrer ydeevnen.

            // app/page.js

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  // Returværdien er *ikke* serialiseret
  // Du kan returnere Date, Map, Set osv.

  if (!res.ok) {
    // Dette vil aktivere den nærmeste `error.js` fejlgrænse
    throw new Error('Kunne ikke hente data');
  }

  return res.json();
}

export default async function Page() {
  const data = await getData();

  return <div>{data.title}</div>;
}

            

              
                Copy
              
            
          

2. Datahentning i klientkomponenter

Klientkomponenter, der er angivet med direktivet 'use client' øverst i filen, kører i brugerens browser. Datahentning i klientkomponenter involverer typisk brug af hooket `useEffect` og et bibliotek som `axios` eller `fetch`-API'en. Serverhandlinger giver en sikker måde at mutere serverdata fra klientkomponenter. Dette giver en sikker måde for klientkomponenter at interagere med data på serveren uden at udsætte API-endpoints direkte.

            // app/components/ClientComponent.js
'use client';

import { useState, useEffect } from 'react';

export default function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const data = await res.json();
      setData(data);
    }

    fetchData();
  }, []);

  if (!data) {
    return <div>Indlæser...</div>;
  }

  return <div>{data.title}</div>;
}

            

              
                Copy
              
            
          

SEO-overvejelser med App Directory

App Directorys server-første tilgang giver betydelige fordele for SEO. Da indhold gengives på serveren, kan søgemaskinecrawlere nemt få adgang til og indeksere sideindholdet. Her er nogle vigtige SEO-overvejelser:

• Metadata: Brug tagget <head> i dine layouts og sider til at definere metadata såsom titel, beskrivelse og søgeord. Next.js giver indbygget understøttelse af styring af metadata via API'en Metadata.
• Semantisk HTML: Brug semantiske HTML-elementer (f.eks. <article>, <nav>, <aside>) til at strukturere dit indhold logisk og give kontekst til søgemaskiner.
• Tilgængelighed: Sørg for, at din applikation er tilgængelig for brugere med handicap. Dette inkluderer at give alternativ tekst til billeder, bruge korrekt overskriftshierarki og sikre tilstrækkelig farvekontrast.
• Ydeevne: Optimer din applikations ydeevne for at forbedre brugeroplevelsen og søgemaskinerangeringer. Dette inkluderer minimering af klient-side JavaScript, optimering af billeder og udnyttelse af caching.

Fordele ved at bruge App Directorys routingsystem

Praktiske eksempler på App Directory Routing i aktion

I denne struktur repræsenterer `@analytics` og `@settings` parallelle ruter, der vil blive gengivet i hoveddashboardlayoutet. Hver parallel rute har sin egen page.js-fil, der definerer indholdet til det pågældende panel. Layoutet kan bestemme, hvor disse skal placeres ved hjælp af komponenten <Slot>.

Migrering fra Pages Directory til App Directory

Migrering af en eksisterende Next.js-applikation fra Pages Directory til App Directory kræver omhyggelig planlægning og udførelse. Selvom App Directory giver betydelige fordele, introducerer det også nye koncepter og mønstre, som udviklere skal forstå. Her er en trin-for-trin-guide, der hjælper dig gennem migreringsprocessen:

1. Forstå de vigtigste forskelle: Før du begynder migreringen, skal du sørge for, at du grundigt forstår de vigtigste forskelle mellem Pages Directory og App Directory, herunder routingsystemet, datahentning og komponentarkitektur.
2. Opret et `app`-bibliotek: Opret et nyt bibliotek med navnet `app` i roden af dit Next.js-projekt. Dette bibliotek vil rumme alle de komponenter og ruter, der er en del af App Directory.
3. Migrer ruter gradvist: Start med at migrere ruter trinvist, én ad gangen. Dette giver dig mulighed for at teste og debugge hver rute individuelt, hvilket minimerer risikoen for at introducere fejl.
4. Konverter komponenter til serverkomponenter: Konverter dine eksisterende React-komponenter til serverkomponenter, når det er muligt. Dette vil forbedre ydeevnen og reducere mængden af JavaScript, der skal downloades og udføres i browseren.
5. Opdater datahentningslogik: Opdater din datahentningslogik for at drage fordel af App Directorys indbyggede datahentningsfunktioner. Dette kan involvere flytning af datahentningskode fra klientkomponenter til serverkomponenter.
6. Implementer layouts og skabeloner: Implementer layouts og skabeloner for at definere delte UI-elementer, der er ensartede på tværs af flere sider.
7. Test grundigt: Test hver migreret rute grundigt for at sikre, at den fungerer korrekt, og at der ikke er nogen regressioner.
8. Fjern biblioteket `pages`: Når alle ruter er migreret, kan du fjerne biblioteket `/pages`.

Konklusion

Efterhånden som Next.js-økosystemet fortsætter med at udvikle sig, er App Directory klar til at blive standarden for opbygning af robuste, skalerbare og performante webapplikationer. Omfavn ændringen, udforsk mulighederne, og frigør det fulde potentiale i Next.js!